<template>
	<view class="order_list_box">
		<view class="order_tab_box">
			<view class="order_type_tab_box">
				<view
					:class="['order_type_tab_head', item.status === table.orderType ? 'order_type_tab_head_active' : '']"
					@click="handelChangeOrderType(item)"
					v-for="item in orderTab"
					:key="item.status">
					<view class="type_text">{{ item.name }}</view>
					<view class="active_type"></view>
				</view>
			</view>
			<view class="order_status_type_box">
				<view
					:class="['order_status_text', item.status == table.status ? 'active_order_status' : '']"
					@click="handleChangeStatus(item)"
					v-for="item in tabStatus"
					:key="item.name + item.status">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="order_tips" v-if="table.orderType == -1 && table.list.length > 0">多天的订单，为了方便服务，接单后将按天自动拆分。</view>
		<view class="order_list_item_box" v-if="table.list.length > 0">
			<view class="order_item_box" @click="toDetails(item)" v-for="item in table.list" :key="item">
				<view class="order_status_box">
					<view class="name_status">
						<view class="studio_name">{{ item.studioName }}</view>
						<view class="order_status">{{ getStatusText(item.status) }}</view>
					</view>
					<view class="order_date">订单号：{{ item.id }}</view>
				</view>
				<view class="order_server_info">
					<scroll-view class="multiple_specs_scroll" scroll-x="true" v-if="item?.orderGoodsSkuVOS?.length > 1">
						<view class="server_info_box" v-for="val in item.orderGoodsSkuVOS" :key="val.skuId">
							<image class="server_img" :src="val.goodsAvatar"></image>
							<view class="specs_box">{{ val.goodsName }}</view>
							<!--							<view class="server_price">×{{ val.serviceDays }}</view>-->
						</view>
					</scroll-view>
					<view class="server_info_box" v-if="item?.orderGoodsSkuVOS?.length == 1">
						<image class="server_img" :src="item?.orderGoodsSkuVOS[0]?.goodsAvatar"></image>
						<view class="name_price">
							<view class="server_name">{{ item?.orderGoodsSkuVOS[0]?.goodsName }}</view>
							<view class="specs_price">
								<text class="server_specs" v-if="item.type == 1">¥{{ item?.orderGoodsSkuVOS[0]?.price }}/次</text>
								<text class="server_specs" v-else>{{ item?.orderGoodsSkuVOS[0]?.serviceTime }} | ¥{{ item?.orderGoodsSkuVOS[0]?.price }}</text>
							</view>
						</view>
					</view>
					<view class="order_price_box">
						<view class="order_price">¥{{ Number(item.payAmount) }}</view>
						<view class="pay_text">{{ getPayText(item.status) }}</view>
					</view>
				</view>
				<view class="order_other_info_box">
					<view class="other_info_item" v-if="item.joinId">
						<view class="other_label">关联订单</view>
						<view class="other_value">{{ item.joinId }}</view>
					</view>
					<view class="other_info_item" v-if="item.type != 1">
						<view class="other_label">宠物{{ item.petNum }}只</view>
						<view class="other_value">
							<text v-for="(val, valIndex) in item.petList" :key="valIndex">
								{{ val.petNickName }}({{ getPetTypeText(val.type) }})
								<text class="m_l_r_8" v-if="valIndex < item.petList.length - 1">&nbsp;|&nbsp;</text>
							</text>
						</view>
					</view>
					<view class="other_info_item">
						<template v-if="table.orderType == -1">
							<view class="other_label">服务{{ item.serviceDays }}天</view>
							<view class="other_value">
								<text v-for="(val, valIndex) in item.serviceTimeSlotArray" :key="valIndex">
									{{ val.slice(5, 10).replace(/-/g, "/") }}
									<text class="m_l_r_8" v-if="valIndex < item.serviceTimeSlotArray.length - 1">&nbsp;|&nbsp;</text>
								</text>
							</view>
						</template>
						<template v-else>
							<view class="other_label">服务时间</view>
							<view class="other_value">{{ item.serviceStartTime?.substring(0, 10) }}&nbsp;{{ handleDoorTime(item.doorTime) }}</view>
						</template>
					</view>
					<view class="other_info_item" v-if="item.type != 1">
						<view class="other_label">服务地址</view>
						<view class="other_value">{{ item.address }}</view>
					</view>
					<view class="other_info_item" v-if="item.type == 1 && item?.petList?.length">
						<view class="other_label">服务宠物</view>
						<view class="other_value">
							<text class="pet_name_date" v-for="(val, i) in item.petList" :key="i">{{ val.petNickName }}</text>
						</view>
					</view>
				</view>
				<view class="pet_teacher_box" v-if="[2, 3, 4].includes(item.status) && item.petsitterUserId">
					<view class="pet_teacher_title">陪宠师</view>
					<image class="pet_teacher_img" :src="item.petsitterAvatar"></image>
					<view class="pet_teacher_name">{{ item.petsitterNickName }}</view>
				</view>
				<view class="btn_box">
					<template v-if="table.orderType == -1">
						<view class="xjs-btn-primary-plain cancel_btn" v-if="[0, 1, 8].includes(Number(item.status))" @click.stop="handleCancelAllOrder(item)">取消订单</view>
						<view class="xjs-btn-primary-plain cancel_btn" v-if="[0, 1, 8].includes(Number(item.status)) && item.type === 0" @click.stop="handleEditOrder(item)">
							修改订单
						</view>
						<view class="xjs-btn-primary soild_btn" v-if="[0].includes(Number(item.status))" @click.stop="handlePay(item)">立即付款</view>
					</template>
					<template v-else>
						<view class="xjs-btn-primary-plain cancel_btn" v-if="[1].includes(Number(item.status))" @click.stop="handleCancel(item)">取消订单</view>
						<view class="xjs-btn-primary-plain cancel_btn" v-if="[1].includes(Number(item.status)) && item.type === 0" @click.stop="handleEditOrder(item)">修改订单</view>
						<view class="xjs-btn-primary soild_btn" v-if="[1].includes(Number(item.status)) && item.type === 0" @click.stop="handleBuyAddServer(item)">买增值服务</view>
						<!--          <view class="xjs-btn-primary-plain cancel_btn" v-if="[5,6,7].includes(Number(item.status))"-->
						<!--                @click.stop="handleDelete(item)">删除-->
						<!--          </view>-->
						<view class="xjs-btn-primary soild_btn" v-if="[3].includes(Number(item.status)) && !item?.evaluate && item.type === 0" @click.stop="handleComment(item)">
							服务评价
						</view>
					</template>
				</view>
			</view>
			<uni-load-more iconType="auto" :status="table.loading" />
		</view>
		<view class="empty_box" v-else>
			<image class="empty_img" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-54.png"></image>
			<view>暂无数据~</view>
		</view>
		<paymentPopup ref="paymentPopupRef" @confirm="paySuccess" @fail="payFail"></paymentPopup>
	</view>
</template>
<script setup lang="ts">
import { reactive, ref, computed, watch } from "vue";
import { onPullDownRefresh, onReachBottom, onShow, onLoad } from "@dcloudio/uni-app";
import api from "@/api/index";
import { useUserStoreToRefs } from "@/store/useUserStore";
import { payment } from "@/hooks/usePay";

const { userInfo } = useUserStoreToRefs();
const orderTab = reactive([
	{ name: "总订单", status: -1 },
	{ name: "日订单", status: 0 }
]);
const tabAllStatus = reactive([
	{ name: "全部", status: -1 },
	{ name: "待付款", status: 0 },
	{ name: "待接单", status: 1 },
	{ name: "已接单", status: 2 }
]);
const tabDayStatus = reactive([
	{ name: "全部", status: -1 },
	{ name: "待服务", status: 1 },
	{ name: "服务中", status: 2 },
	{ name: "已完成", status: 3 }
]);
const tabStatus = reactive([]);

const table = reactive<{
	loading: string;
	list: [];
	page: number;
	limit: number;
	status: number | string;
	orderType: number | string;
}>({
	loading: "more",
	list: [],
	page: 1,
	limit: 20,
	status: -1,
	orderType: -1
});

const getStatusText = (status) => {
	if (table.orderType == -1) {
		switch (status) {
			case 0:
				return "待付款";
			case 1:
			case 8:
				return "待接单";
			case 2:
			case 3:
				return "已接单";
			case 4:
				return "已完成";
			case 5:
			case 6:
			case 7:
				return "已取消";
			default:
				return "";
		}
	} else {
		switch (status) {
			case 0:
				return "待接单";
			case 1:
				return "待服务";
			case 2:
				return "服务中";
			case 3:
				return "已完成";
			case 4:
			case 5:
				return "已取消";
			case 6:
				return "待付款";
			default:
				return "";
		}
	}
};
const getPayText = (type) => {
	if (table.orderType == -1) {
		switch (type) {
			case 0:
				return "应付";
			case 5:
			case 6:
			case 7:
				return "合计";
			default:
				return "实付";
		}
	} else {
		switch (type) {
			case 4:
			case 5:
				return "合计";
			default:
				return "实付";
		}
	}
};
const handleDoorTime = (data) => {
	if (data) {
		let dataArr = data?.split("~");
		if (dataArr[0] == "00:00" && dataArr[1] == "00:00") {
			return "无时间段要求";
		} else {
			return data;
		}
	} else {
		return data;
	}
};
const getPetTypeText = (type) => {
	switch (type) {
		case 0:
			return "猫";
		case 1:
			return "狗";
		default:
			return "其他";
	}
};
// 数据初始化
const onDataInit = async () => {
	table.list = [];
	table.page = 1;
	await onDataGet();
};
watch(
	() => table.orderType,
	(newVal, oldVal) => {
		if (newVal == -1) {
			Object.assign(tabStatus, tabAllStatus);
		} else {
			Object.assign(tabStatus, tabDayStatus);
		}
	},
	{ immediate: true }
);

// 获取数据
const onDataGet = async () => {
	let url = "";
	if (table.orderType == -1) {
		url = "/mall/order/getOrderPage";
	} else {
		url = "/mall/order/order-detail/page";
	}
	return new Promise(async (resolve, reject) => {
		uni.showLoading({
			title: "加载中",
			mask: true
		});
		table.loading = "loading";
		try {
			const {
				data: { total = 0, records = [] }
			} = await api({
				method: "get",
				contentType: "json",
				url: url,
				data: {
					page: table.page,
					limit: table.limit,
					status: table.status
				}
			});
			table.list = table.page == 1 ? records : table.list.concat(records);
			if (!records.length || table.list.length >= total) {
				table.loading = "noMore";
			} else {
				table.loading = "more";
			}
			uni.hideLoading();
			resolve(true);
		} catch (error) {
			uni.hideLoading();
			table.loading = "more";
			reject(false);
		}
	});
};

const toDetails = (item: any) => {
	if (table.orderType == -1) {
		if (item.type == 1) {
			if ([2].includes(item.status)) {
				uni.navigateTo({
					url: `/pages/petsOrder/addedServicesAllDetail/index?id=${item.id}&orderType=${table.orderType}&status=${item.status}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/petsOrder/addedServicesDetail/index?id=${item.id}&orderType=${table.orderType}`
				});
			}
		} else {
			if ([2].includes(item.status)) {
				uni.navigateTo({
					url: `/pages/petsOrder/allOrderDetail/index?id=${item.id}&orderType=${table.orderType}&status=${item.status}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/petsOrder/petsDetails/index?id=${item.id}&orderType=${table.orderType}`
				});
			}
		}
	} else {
		if (item.type == 1) {
			uni.navigateTo({
				url: `/pages/petsOrder/addedServicesDetail/index?id=${item.id}&orderType=${table.orderType}`
			});
		} else {
			uni.navigateTo({
				url: `/pages/petsOrder/petsDetails/index?id=${item.id}&orderType=${table.orderType}`
			});
		}
	}
};
// 获取其他待服务日单
const getOtherDayOrder = async (item) => {
	return new Promise(async (resolve, reject) => {
		const res = await api({
			method: "get",
			url: `/mall/order/order-detail/getJoinOrderDetail`,
			data: {
				orderId: item.orderId,
				orderDetailId: item.id
			}
		});
		if (res.code == 0) {
			if (res.data.length > 1) {
				resolve(true);
			} else {
				resolve(false);
			}
		} else {
			reject(false);
		}
	});
};
// 修改订单
const handleEditOrder = async (item) => {
	uni.navigateTo({ url: `/pages/petsOrder/editOrder/index?orderId=${item.id}&orderType=${table.orderType}` });
};
//购买增值服务
const handleBuyAddServer = async (item) => {
	uni.navigateTo({
		url: `/pages/payment/extraService/index?orderId=${item.id}`
	});
};
// 日单取消订单
const handleCancel = async (item) => {
	const res = await getOtherDayOrder(item);
	if (res) {
		uni.navigateTo({
			url: `/pages/petsOrder/cancellationOrder/index?orderId=${item.orderId}&orderDetailId=${item.id}&orderType=${table.orderType}`
		});
	} else {
		uni.showModal({
			title: "确定取消订单吗？",
			content: "注意：确定后订单将关闭",
			success: async (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: `/pages/petsOrder/cancellationReason/index?orderId=${item.orderId}&orderDetailId=${item.id}&checkedList=${item.id}&orderType=${table.orderType}`
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
			}
		});
	}
};
// 总订单取消订单
const handleCancelAllOrder = async (item) => {
	uni.showModal({
		title: "确定取消订单吗？",
		content: "注意：确定后订单将关闭",
		success: async (res) => {
			if (res.confirm) {
				uni.navigateTo({
					url: `/pages/petsOrder/cancellationReason/index?orderId=${item.id}&orderType=${table.orderType}`
				});
			}
		}
	});
};
const paymentPopupRef = ref(null);
const handlePay = async (item) => {
	// #ifndef MP-TOUTIAO
	// 该弹窗用于非抖音支付，包括微信、支付宝等
	// 使用该弹窗时需要添加条件编译，避免抖音支付调用该弹窗
	// 组件全局注册，可以不用import引入

	// data 所需参数
	// checkOrderType: 订单检验和支付成功后续功能 petsService 宠物服务，具体名称查询 pages/share/aliPayForQR/index.vue 页面的 checkList
	// payAmount: 订单金额
	// payBusinessType: 支付业务类型 1-服务订单支付  2保证金支付
	// orderId: 订单id， payBusinessType为2时可不传

	// <paymentPopup ref="paymentPopupRef" @confirm='xxx' />
	await paymentPopupRef.value.open({
		orderId: item.id,
		payAmount: item.payAmount,
		payBusinessType: 1,
		checkOrderType: "petsService"
	});
	// #endif

	// #ifdef MP-TOUTIAO
	let res = await payment({
		payType: 1,
		orderId: item.id,
		payBusinessType: 1,
		amount: item.payAmount
	});
	if (res) {
		uni.showToast({
			title: "支付成功",
			icon: "none",
			duration: 1000
		});
		setTimeout(async () => {
			await onDataInit();
		}, 1000);
	} else {
		uni.showToast({
			title: "支付失败",
			icon: "none",
			duration: 1000
		});
	}
	// #endif
};
// 支付成功
const paySuccess = async (data) => {
	uni.navigateTo({
		url: `/pages/payment/successfulPayment/index?orderId=${data.orderId}`
	});
	paymentPopupRef.value.close();
	await onDataInit();
};
// 支付失败
const payFail = async () => {
	paymentPopupRef.value.close();
	await onDataInit();
};
// 评价
const handleComment = async (item) => {
	uni.navigateTo({
		url: `/pages/petsOrder/evaluation/index?orderId=${item.id}&isSuperiorOrder=${table.orderType}&studioId=${item?.studioId}`
	});
};
// 删除
const handleDelete = async (item) => {
	uni.showModal({
		title: "提示",
		content: "确定删除订单吗？",
		success: async (res) => {
			if (res.confirm) {
				const res = await api({
					method: "post",
					url: `/mall/order/delete`,
					data: {
						id: item.id
					}
				});
				if (res.code == 0) {
					uni.showToast({
						title: "操作成功",
						icon: "none"
					});
					await onDataInit();
				}
			}
		}
	});
};

const handelChangeOrderType = async (item) => {
	table.orderType = item.status;
	table.status = -1;
	Object.assign(table, "status", -1);
	await onDataInit();
};

const handleChangeStatus = async (item: any) => {
	table.status = item.status;
	await onDataInit();
	scrollToTop();
};
const scrollToTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};
// 页面下拉刷新
onPullDownRefresh(async () => {
	console.log("onPullDownRefresh");
	if (table.loading == "loading") {
		uni.stopPullDownRefresh();
	} else {
		try {
			await onDataInit();
		} catch (error) {}
		uni.stopPullDownRefresh();
	}
});
// 触底
onReachBottom(() => {
	console.log("onReachBottom");
	if (table.loading == "noMore") return false;
	table.page++;
	onDataGet();
});
onShow(async () => {
	await onDataGet();
});
onLoad((options) => {
	if (options.hasOwnProperty("orderStatus")) {
		table.status = Number(options.orderStatus);
	}
	if (options.hasOwnProperty("orderType")) {
		table.orderType = Number(options.orderType);
	}
});
</script>

<style scoped lang="scss">
.order_list_box {
	min-height: calc(100vh - 88rpx - 32rpx - var(--status-bar-height));
	padding-bottom: calc(constant(safe-area-inset-bottom));
	padding-bottom: calc(env(safe-area-inset-bottom));
	box-sizing: border-box;
	background-color: var(--pages-bg-color);
}

.order_tab_box {
	background: #f9f6f6;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1;
}

.order_type_tab_box {
	//position: sticky;
	//top: 0;
	//z-index: 1;
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	background: #ffffff;
	padding: 0 40rpx;
	box-sizing: border-box;
	border-top: 1rpx solid #e4e6e6;

	.order_type_tab_head {
		position: relative;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		height: 88rpx;
		padding-top: 20rpx;
		box-sizing: border-box;

		.type_text {
			font-weight: 400;
			font-size: 28rpx;
			height: 100%;
			color: #5c5e5e;
			text-align: center;
		}
	}

	.order_type_tab_head_active {
		.type_text {
			font-weight: bold;
			font-size: 32rpx;
			color: #1b2120;
		}

		.active_type {
			bottom: 0;
			width: 32rpx;
			height: 8rpx;
			background: var(--color-primary);
			border-radius: 4rpx;
		}
	}
}

.order_status_type_box {
	display: flex;
	justify-content: space-between;
	padding: 32rpx 40rpx 24rpx;
	box-sizing: border-box;
	//position: sticky;
	//top: 90rpx;
	//z-index: 1;
	background: #f9f6f6;

	.order_status_text {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 110rpx;
		height: 58rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #7c807f;
		background: #fff;
		border-radius: 29rpx;
	}

	.active_order_status {
		border-radius: 29rpx;
		border: 2rpx solid #ff6084;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 26rpx;
		color: #f87c90;
	}
}

.order_tips {
	padding: 0 40rpx;
	box-sizing: border-box;
	margin-top: 24rpx;
	margin-bottom: 24rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #5c5e5e;
}

.order_list_item_box {
	padding: 24rpx 32rpx 24rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;

	.order_item_box {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;

		.order_status_box {
			.name_status {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.studio_name {
					font-weight: bold;
					font-size: 32rpx;
					color: #1b2120;
				}

				.order_status {
					font-weight: 400;
					font-size: 26rpx;
					color: #6363ff;
				}
			}

			.order_date {
				font-weight: 400;
				font-size: 24rpx;
				color: #808080;
				margin-top: 16rpx;
			}
		}

		.order_server_info {
			display: flex;
			justify-content: space-between;
			margin-top: 48rpx;

			.server_info_box {
				display: flex;
				align-items: center;
				flex-direction: row;
				width: calc(100% - 120rpx - 16rpx);

				.server_img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
				}

				.name_price {
					margin-left: 16rpx;
					max-width: calc(100% - 120rpx - 16rpx);

					.server_name {
						font-weight: bold;
						font-size: 32rpx;
						color: #1b2120;
					}

					.specs_price {
						font-weight: 400;
						font-size: 26rpx;
						color: #7c807f;
						margin-top: 24rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;

						.server_specs {
						}

						.server_price {
						}
					}
				}
			}

			.multiple_specs_scroll {
				white-space: nowrap;
				width: calc(100% - 128rpx);

				.server_info_box {
					display: inline-block;
					width: 120rpx;
					height: 120rpx;
					border-radius: 12rpx;
					position: relative;
					margin-right: 16rpx;

					.server_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
					}

					.specs_box {
						position: absolute;
						top: 8rpx;
						left: 8rpx;
						max-width: 98rpx;
						background: #f9f6f6;
						border-radius: 4rpx;
						padding: 4rpx;
						box-sizing: border-box;
						font-weight: 400;
						font-size: 18rpx;
						color: #1b2120;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.server_price {
						position: absolute;
						bottom: 0;
						right: 0;
						padding: 8rpx 10rpx;
						box-sizing: border-box;
						background: rgba(0, 0, 0, 0.35);
						border-radius: 24rpx 0rpx 24rpx 0rpx;
						font-weight: bold;
						font-size: 18rpx;
						color: #ffffff;
					}
				}
			}

			.order_price_box {
				width: 128rpx;
				padding: 0 16rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				box-shadow: -12rpx 0 20rpx -18rpx rgba(0, 0, 0, 0.2);

				.order_price {
					font-weight: bold;
					font-size: 28rpx;
					color: #1b2120;
				}

				.pay_text {
					font-weight: 400;
					font-size: 24rpx;
					color: #7c807f;
					margin-top: 16rpx;
				}
			}
		}

		.order_other_info_box {
			width: 100%;
			border-radius: 16rpx;
			border: 2rpx solid #f9f6f6;
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			.other_info_item {
				display: flex;
				flex-direction: row;
				margin-bottom: 40rpx;

				.other_label {
					width: 96rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #5c5e5e;
				}

				.other_value {
					max-width: calc(100% - 96rpx - 16rpx);
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					font-weight: 400;
					font-size: 24rpx;
					color: #7c807f;
					margin-left: 16rpx;

					.pet_name_date {
						display: inline-block;
						//margin-bottom: 24rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;
						margin-right: 24rpx;
					}
				}
			}

			.other_info_item:last-child {
				margin-bottom: 0;
			}
		}

		.pet_teacher_box {
			display: flex;
			align-items: center;
			flex-direction: row;
			width: 100%;
			border-radius: 16rpx;
			border: 2rpx solid #f9f6f6;
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			.pet_teacher_title {
				width: 96rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #5c5e5e;
			}

			.pet_teacher_img {
				margin-left: 16rpx;
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
			}

			.pet_teacher_name {
				margin-left: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #7c807f;
			}
		}

		.btn_box:not(:empty) {
			display: flex;
			justify-content: flex-end;
			margin-top: 40rpx;

			.cancel_btn {
				box-sizing: border-box;
				width: 196rpx;
				height: 72rpx;
				margin-left: 16rpx;
			}

			.soild_btn {
				box-sizing: border-box;
				width: 196rpx;
				height: 72rpx;
				margin-left: 16rpx;
			}
		}

		.btn_box:empty {
		}
	}
}

.empty_box {
	text-align: center;
	font-weight: 400;
	font-size: 32rpx;
	color: #1b2120;

	.empty_img {
		width: 400rpx;
		height: 315rpx;
		margin-top: 320rpx;
		margin-bottom: 50rpx;
	}
}

.mt_16 {
	margin-top: 16rpx;
}
</style>
}
